<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="examine page-main">
    <van-nav-bar title="故障设备维修进度" left-arrow @click-left="goBack" />
    <div class="page-scroll-content page-container">
      <div>
        <CommonCard>
          <div>
            <CommonTitle v-bind="{ titleText: '维护资产详细信息' }"></CommonTitle>
            <div class="content mt-10">
              <div class="top">
                <div class="left">
                  <img
                    class="img"
                    src="https://img0.baidu.com/it/u=613413583,534154897&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=500"
                  />
                </div>
                <div class="right">
                  <div class="fs-15 fw-b f-j-b">
                    <div>{{ queryData.device }}</div>
                    <div>{{ queryData.grade }}</div>
                  </div>
                  <div class="f-j-b mt-2">
                    <div>{{ queryData.code1 }}</div>
                    <div>{{ queryData.type }}</div>
                  </div>
                  <div class="f-a-c mt-2">
                    <van-tag plain round type="primary" class="mr-4">优质</van-tag>
                    {{ queryData.supplier }}
                  </div>
                </div>
              </div>
              <div class="mt-16">使用地点：{{ queryData.location }}</div>
              <div class="mt-2">资产条码：{{ queryData.code2 }}</div>
              <div class="mt-2">所属部门：{{ queryData.department }}</div>
              <div class="mt-2">规格参数：{{ queryData.specs }}</div>
              <div class="mt-2">备注：{{ queryData.notes }}</div>
              <div class="f-j-b mt-2">
                <div>购买时间：{{ queryData.time1 }}</div>
                <div>寿命：{{ queryData.time3 }}</div>
              </div>
              <div class="mt-2">保修期：{{ queryData.time2 }}</div>
              <div class="mt-2">故障描述：{{ queryData.desc }}</div>
              <div class="mt-2">维修处理结果：{{ queryData.result }}</div>
            </div>
          </div>
        </CommonCard>
        <CommonCard>
          <div>
            <CommonTitle v-bind="{ titleText: '维修进度' }"></CommonTitle>
            <div class="CommonCard-container">
              <div class="pro-content fs-13" v-for="(item, i) in list" :key="i">
                <div class="time-box">
                  <div>{{ item.time1 }}</div>
                  <div>{{ item.time2 }}</div>
                </div>
                <div>
                  <div class="fs-15 fw-b">{{ item.stepName }}</div>
                  <div class="greyColor mt-2">{{ item.desc }}</div>
                  <div class="greyColor mt-2">{{ item.status }}</div>
                </div>
              </div>
            </div>
          </div>
        </CommonCard>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import CommonCard from '@/components/CommonCard/index.vue'
import CommonTitle from '@/components/CommonTitle/index.vue'
import { ref } from 'vue'

import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const queryData = ref({})
queryData.value = JSON.parse(route.query.queryData)
console.log(queryData)

const text = ref('')
const list = ref([
  {
    time1: '2023-01-11',
    time2: '13:21:15',
    stepName: '提交申请',
    desc: '李四 提交 维修申请',
    status: '批准通过'
  },
  {
    time1: '2023-01-11',
    time2: '13:21:15',
    stepName: '部门经理审批',
    desc: '通知维修部',
    status: '批准通过'
  },
  {
    time1: '2023-01-11',
    time2: '13:21:15',
    stepName: '维修部领导审核',
    desc: '',
    status: '批准通过'
  },
  {
    time1: '',
    time2: '',
    stepName: '企业主管领导审核',
    desc: '',
    status: '审核中'
  }
])
const goBack = () => {
  router.back()
}

const detailShow = ref(false)
const curItem = ref()
const openDetail = (item: any) => {
  curItem.value = item
  detailShow.value = true
}
</script>

<style scoped lang="less">
.examine {
  .content {
    &:last-child {
      border: none;
      margin-bottom: 0;
    }
    .top {
      display: flex;
      .left {
        flex: 0 0 62px;
        height: 62px;
        margin-right: 10px;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex: 1;
      }
    }
  }
  .pro-content {
    display: flex;
    padding-bottom: 20px;
    .time-box {
      flex: 0 0 70px;
      text-align: right;
      margin-right: 43px;
      position: relative;
      margin-bottom: 8px;
      &::before {
        content: '';
        position: absolute;
        display: block;
        width: 8px;
        height: 8px;
        background-color: @themeColor;
        right: -20px;
        top: 4px;
        border-radius: 50%;
      }
      &::after {
        content: '';
        position: absolute;
        display: block;
        width: 1px;
        height: 100%;
        background-color: @themeColor;
        right: -16px;
        top: 20px;
      }
    }
    &:last-child {
      padding-bottom: 0px;
      .time-box {
        &::before {
          content: '';
          width: 6px;
          height: 6px;
          border: 2px solid @themeColor;
          background-color: #fff;
        }
        &::after {
          display: none;
        }
      }
    }
  }
}
</style>
